import React, { Component } from 'react'
import { Route, Switch, Link } from 'react-router-dom'

import User from '../User'
import Film from '../Film'

class Index extends Component {
  render() {
    // 可以通过 this.props.match.path 来获取当前子路由它的父路径，这样在修改了父路由规则时，子路由不用去修改父路径。
    const perfixUrl = this.props.match.path
    return (
      <>
        <div>
          <Link to={`${perfixUrl}/user`}>用户管理</Link>
          &nbsp;&nbsp;|&nbsp;&nbsp;
          <Link to={`${perfixUrl}/film`}>电影管理</Link>
        </div>
        <hr />
        <Switch>
          <Route path={`${perfixUrl}/user`} component={User} />
          <Route path={`${perfixUrl}/film`} component={Film} />
        </Switch>
      </>
    )
  }
}

export default Index
